<template>
  <div class="header">
    <ul>
      <li v-for="item in list" :key="item.id">
        <!--        {{item.name}} &#45;&#45; {{item.age}}-->
        {{ item.name }} --- {{ item.age }}
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import {defineProps} from "vue";
import {type Persons} from "../types";
// defineProps<{list: Persons}>()
withDefaults(defineProps<{ list?: Persons }>(), {
  list: () => [{id: 'asfasf1', name: 'xiaozhu', age: 2}]
});

</script>

<style scoped>
.header {
  width: 400px;
  background-color: skyblue;
}
</style>